<template>
  <div class="mine" style="background-color: #f4f4f4">
    <!-- <myhead title="我的"></myhead> -->
    <div class="main-box">
      <div class="avatar">
        <div class="nick-name">
          <div class="nick-img">
            <upload></upload>
          </div>
          <div class="nick-user gotologin">
            <p style="font-size: 20px" v-if="userInfo.usernames">
              用户名:{{ userInfo.usernames }}
            </p>
            <router-link v-else class="" :to="{ name: 'login' }"
              >立即登录</router-link
            >
            <!-- <div class="My_pl">
              <span v-if="userInfo.usernames" @click="gotoshoucang"
                >我的收藏:{{ sclist.length }}</span
              >
              <span v-else>我的收藏:0</span>
              <span v-if="userInfo.usernames" @click="gotopinglun"
                >我的论评:{{ list.length }}</span
              >
              <span v-else>我的评论:0</span>
            </div> -->
          </div>
        </div>
      </div>

      <div class="middle">
        <van-cell-group>
          <van-cell title="我的收藏" @click="gotoshoucang"  icon="clock">
            <p style="color:rgb(249, 78, 78)">
              {{ userInfo.usernames ? sclist.length : 0 }}条
            </p></van-cell
          >
          <van-cell title="我评论的" @click="gotopinglun" icon="thumb-circle"
            ><p style="color: rgb(249, 78, 78)">
              {{ userInfo.usernames ? list.length : 0 }}条
            </p></van-cell
          >
          <van-cell title="我的己购" icon="shopping-cart" />
        </van-cell-group>
      </div>

      <div class="botm">
        <van-cell-group>
          <van-cell title="我的账户" icon="manager" />
          <van-cell title="我要直播" icon="audio" />
          <van-cell title="设置" icon="more" />
        </van-cell-group>
      </div>

      <div class="end" v-if="show">
        <van-button plain type="primary" @click="clear">退出登录</van-button>
      </div>
    </div>

    <myfoot></myfoot>
  </div>
</template>


<script>
import Vue from "vue";
import { Toast } from "vant";

Vue.use(Toast);

import { mapState, mapMutations } from "vuex";
import myfoot from "../../components/myfoot.vue";
export default {
  components: { myfoot },
  data() {
    return {
      username: localStorage.getItem("username"),
      phone: null,
      show: true,
      sclist: [],
      list: [],
    };
  },
  methods: {
    gotopinglun() {
      this.$router.push({ name: "pinglun" });
    },
    getpl() {
      this.$ajax
        .Fmfindall({
          username: localStorage.getItem("username"),
        })
        .then((res) => {
          this.sclist = res.data;
          console.log(this.sclist);
        });
    },

    gotoshoucang() {
      this.$router.push({ name: "shoucang" });
    },

    gotoLogin() {
      this.$router.push({
        name: "login",
      });
    },
    ...mapMutations(["setUserInfo"]),
    clear() {
      localStorage.clear();
      Toast("用户退出登录");
      this.$router.push({ name: "listen" });
    },
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  mounted() {
    if (localStorage.getItem("username")) {
      this.$ajax
        .Fmfindall({
          username: localStorage.getItem("username"),
        })
        .then((res) => {
          this.sclist = res.data;
        });

      this.$ajax
        .FMuserpl({
          username: localStorage.getItem("username"),
        })
        .then((res) => {
          this.list = res.data;
          console.log(this.list);
        });
      this.show = true;
    } else {
      this.show = false;
    }

    if (this.username == null) {
      this.phone = localStorage.getItem("phone");
      if (this.phone) {
        this.$ajax
          .getphoneuser({
            phone: this.phone,
          })
          .then((res) => {
            if (res.type == 1) {
              this.$axios
                .post("http://8.136.12.226:3000/users/login/dl", {
                  usernames: res.result.usernames,
                  password: res.result.password,
                })
                .then((res) => {
                  console.log(res.data.token);
                  if (res.data.type == 1) {
                    Toast("登录成功");
                    localStorage.setItem("token", res.data.token);
                    localStorage.setItem("username", res.data.result.usernames);
                    this.$router.push({ name: "mine" });
                    this.$ajax
                      .getuserinfo({ username: this.username })
                      .then((res) => {
                        if (res.code == 200) {
                          this.setUserInfo(res.result);
                        } else {
                          Toast("登录已失效，请重新登录");
                          this.$router.push({ name: "login" });
                        }
                      });
                  } else {
                    Toast("账号或密码错误");
                  }
                });
            }
          });
      } else {
        this.$ajax.getuserinfo({ username: this.username }).then((res) => {
          if (res.code == 200) {
            this.setUserInfo(res.result);
          } else {
            Toast("登录已失效，请重新登录");
            this.$router.push({ name: "login" });
          }
        });
      }
    } else {
      this.$ajax.getuserinfo({ username: this.username }).then((res) => {
        if (res.code == 200) {
          this.setUserInfo(res.result);
        } else {
          Toast("登录已失效，请重新登录");
          this.$router.push({ name: "login" });
        }
      });
    }
  },
};
</script>
<style lang="scss" scoped>
#dl {
  margin-top: 46px;
}

.gotologin {
  font-size: 20px;
  color: #fff;
}
.mine {
  height: 100%;
}
.avatar {
  text-align: center;
  margin-top: -44px;
  height: 200px;
  padding-left: 22px;
  padding-top: 64px;
  background: url("../../assets/images/background.jpg");
  background-position: center;
  display: flex;
  align-items: center;
  color: #fff;
  box-sizing: border-box;
  .nick-name {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .nick-img {
      width: 63px;
      height: 63px;
      border-radius: 35px;
      margin-right: 20px;
      border: 2px solid #fff;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
  }
}
.my-order-tab {
  width: 100%;
  margin: 0 auto;
  display: flex;
  text-align: center;
  font-size: 13px;
  padding: 0;
  height: 79px;
  background: #fff;
  margin-bottom: 10px;
  align-items: center;
  li {
    position: relative;
    flex: 1;
    list-style: none;
    .common-p {
      color: #797d82;
    }
  }
}
.margin-set {
  background: #fff;
  padding: 0 15px;
  height: 49px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f9f9f9;
  .label {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
}

.middle {
  margin-top: 10px;
}

::v-deep .van-icon {
  font-size: 20px;
}
::v-deep .van-cell__title {
  text-align: left;
  font-size: 14px !important;
  color: rgb(157, 157, 157);
}
::v-deep .van-cell {
  line-height: 30px;
  align-items: center;
}
.botm {
  margin-top: 10px;
}
::v-deep .van-button--plain {
  width: 75%;
  margin-top: 9%;
  color: rgb(249, 78, 78);
  border: 1px solid rgb(249, 78, 78);
}
a {
  color: #fff;
}
.nick-img {
  border: none !important;
}
.end {
  margin-left: 20%;
}
.My_pl {
  span {
    font-size: 16px;
    color: #000;
    margin-right: 20px;
  }
}
</style>